<template>
  <view class="bzq-index">
    <!-- 到期日期、剩余天数、退货日期展示区 -->
    <view class="result-block">
      <view class="result-row">
        <view class="result-label">到期日期</view>
        <view class="result-value">{{ result.expirationDate || '****-**-**' }}</view>
      </view>
      <view class="result-row">
        <view class="result-label">剩余(天)</view>
        <view class="result-value">{{ result.leftDays !== null ? result.leftDays : '**' }}</view>
      </view>
      <view class="result-row">
        <view class="result-label">退货日期</view>
        <view class="result-value">{{ result.returnDate || '****-**-**' }}</view>
      </view>
    </view>

    <!-- 表单区 -->
    <view class="form-block">
      <view class="form-row single-block block-prod-date">
        <view class="form-label">生产日期</view>
        <picker mode="date" :value="formData.productionDate" @change="onProductionDateChange">
          <view class="picker-input">{{ formData.productionDate || '请选择生产日期' }}</view>
        </picker>
      </view>
      <view class="form-row single-block block-valid-period">
        <view class="form-label">保质期</view>
        <input class="picker-input" type="number" v-model="formData.validPeriodValue" placeholder="请输入保质期" />
      </view>
      <view class="form-row single-block block-unit-type">
        <view class="form-label">单位类型</view>
        <radio-group @change="onUnitTypeChange">
          <label v-for="(item, idx) in unitTypes" :key="item.value" class="unit-radio">
            <radio :value="item.value" :checked="formData.unitType === item.value" />{{ item.label }}
          </label>
        </radio-group>
      </view>
    </view>

    <!-- 计算按钮 -->
    <view class="btn-block">
      <button class="calc-btn" @click="submit">{{ isUnlock ? "计算" : "看广告获取计算结果" }}</button>
    </view>
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    const todayStr = `${yyyy}-${mm}-${dd}`;
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      formData: {
        productionDate: todayStr,
        validPeriodValue: '',
        unitType: '天',
      },
      result: {
        expirationDate: '',
        leftDays: null,
        returnDate: '',
      },
      validPeriodOptions: ['30', '60', '90', '180', '365'], // 可自定义
      unitTypes: [
        { value: '时', label: '时' },
        { value: '天', label: '天' },
        { value: '周', label: '周' },
        { value: '月', label: '月' },
        { value: '年', label: '年' },
      ],
      reduceOptions: ['0', '10', '20', '30', '40', '50'], // 百分比
    };
  },
  methods: {
    onProductionDateChange(e) {
      this.formData.productionDate = e.detail.value;
    },
    onValidPeriodChange(e) {
      this.formData.validPeriodIndex = e.detail.value;
    },
    onUnitTypeChange(e) {
      this.formData.unitType = e.detail.value;
    },
    calculate() {
      // 生产日期
      const productionDate = new Date(this.formData.productionDate);
      // 保质期数值
      const period = parseInt(this.formData.validPeriodValue);
      // 单位类型
      const unit = this.formData.unitType;
      // 计算到期日期
      let expirationDate = new Date(productionDate);
      switch (unit) {
        case '时':
          expirationDate.setHours(expirationDate.getHours() + period);
          break;
        case '天':
          expirationDate.setDate(expirationDate.getDate() + period);
          break;
        case '周':
          expirationDate.setDate(expirationDate.getDate() + period * 7);
          break;
        case '月':
          expirationDate.setMonth(expirationDate.getMonth() + period);
          break;
        case '年':
          expirationDate.setFullYear(expirationDate.getFullYear() + period);
          break;
      }
      // 计算剩余天数
      const now = new Date();
      const leftDays = Math.ceil((expirationDate - now) / (1000 * 60 * 60 * 24));
      this.result.expirationDate = expirationDate.toISOString().split('T')[0];
      this.result.leftDays = leftDays;
      this.result.returnDate = '';
      this.showResult = true;
      this.isUnlock = true;
    },
    submit() {
      if (!this.formData.productionDate) {
        this.global.toast('请选择生产日期');
        return;
      }
      if (!this.formData.validPeriodValue) {
        this.global.toast('请输入保质期');
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.calculate();
            });
          } catch (error) {
            this.calculate();
          }
        });
      } else {
        this.calculate();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.bzq-index {
  padding: 20rpx;
}
.result-block {
  background: #fffbe6;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx #f0e6d2;
  padding: 20rpx 0;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 30rpx;
  border-bottom: 1px solid #f0e6d2;
  &:last-child {
    border-bottom: none;
  }
}
.result-label {
  color: #666;
  font-size: 28rpx;
}
.result-value {
  color: #ff1afe;
  font-size: 32rpx;
  font-weight: bold;
}
.form-block {
}
.form-row {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: none;
  }
}
.form-label {
  width: 160rpx;
  color: #333;
  font-size: 28rpx;
  flex-shrink: 0;
}
.picker-input {
  color: #666;
  font-size: 28rpx;
  background: #fff;
  border-radius: 8rpx;
  padding: 12rpx 20rpx;
  min-width: 200rpx;
}
.unit-radio {
  margin-right: 12rpx;
  font-size: 28rpx;
  color: #333;
  &:last-child {
    margin-right: 0;
  }
}
.btn-block {
  text-align: center;
  margin-top: 30rpx;
}
.calc-btn {
  background: #db0000;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  padding: 18rpx 0;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 2rpx 8rpx #e6e6e6;
}
.single-block {
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx #e6e6e6;
}
.block-prod-date {
  background: #e6f7ff;
}
.block-valid-period {
  background: #fffbe6;
}
.block-unit-type {
  background: #f9e6ff;
}
// 新增横向排列样式
.block-unit-type .uni-radio-group,
.block-unit-type .uni-radio-group .uni-radio,
.block-unit-type .unit-radio {
  display: inline-flex !important;
  align-items: center;
}
.block-unit-type .unit-radio {
  margin-right: 16rpx;
  margin-bottom: 0;
}
</style>